<template>
  <div class="index-container ec-container">
    <el-row :gutter="10" class="form">
      <el-col :span="4">
        <div class="grid-content">
          <span>渠道：</span>
          <el-select class="w50" v-model="channelId" placeholder="请选择">
            <el-option
              v-for="item in channelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <span>平台：</span>
          <el-select class="w50" v-model="platformId" placeholder="请选择">
            <el-option
              v-for="item in platformOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content">
          <span>店铺编码：</span>
          <el-input class="w50" v-model="storeId" label-width="50"></el-input>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content">
          <span>店铺名称：</span>
          <el-input class="w50" v-model="storeName" label-width="50"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content come">
          <p>【数据来源及更新】</p>
          <p>* 数据时间范围是截止昨日的累计数据</p>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="info">
      <el-col :span="5">
        <div class="grid-content number">
          <span class="title">会员数_截止昨天</span>
          <span>{{memberCount}}</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <p>*会员注册状态：（判断是否近三年订单已购买）</p>
          <p>- 注册且有购买会员；</p>
          <p>- 仅注册无购买会员；</p>
        </div>
      </el-col>
      <el-col :span="11">
        <div class="grid-content">
          <p>注册且购买会员分：有效会员和无效会员</p>
          <p>- 有效会员：注册且在近1年有消费的会员</p>
          <p>- 无效会员：注册且消费会员中注册且但在近1年未消费的会员</p>
        </div>
      </el-col>
    </el-row>
    <!-- 地图显示区域 -->
    <el-row :gutter="10">
      <!--  会员注册状态分布 -->
      <el-col :span="12">
        <div id="memberRegister" class="grid-content"></div>
      </el-col>
      <el-col :span="12">
        <div id="effective" class="grid-content"></div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="memberNum">
      <el-col :span="8">
        <div class="grid-content">
          <span class="title">当月注册会员数</span>
          <p class="counts">{{memberCurrentMonth}}</p>
          <div class="line">
            <i></i>
            <i></i>
          </div>
          <p class="des">年同比变化率：{{rateCompareMonthLastYear}}%</p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <span class="title">当季度注册会员数</span>
          <p class="counts">{{memberCurrentSeason}}</p>
          <div class="line">
            <i></i>
            <i></i>
          </div>
          <p class="des">环比变化率：{{rateCompareSeasonLastYear}}%</p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <span class="title">当年注册会员数</span>
          <p class="counts">{{memberCurrentYear}}</p>
          <div class="line">
            <i class="on"></i>
            <i></i>
          </div>
          <p class="des">环比变化率：{{rateCompareYearLastYear}}%</p>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div id="sixtyDay" class="grid-content"></div>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "memberSwarm",
    data() {
      return {
        options: [],
        //渠道下拉选项
        channelOptions: [
          {
            value: null,
            label: null,
          }
        ],

        //平台下拉选项
        platformOptions: [
          {
            value: null,
            label: null,
          }
        ],
        stsDate: null,//统计日期
        storeId: null,//店铺ID
        storeName: null,//店铺ID
        channelId: null,//渠道ID
        platformId: null,//平台Id
        value: "",
        memberCount: 0,//会员总数

        //会员注册状态分布
        distributionTotal: 0,//总会员数
        distributionRegisteredAndConsumedTotal: 0,//注册且消费
        distributionRegisteredNotConsumedTotal: 0,//注册未消费

        //有效/无效会员饼状图
        validCount: 0,//有效会员
        invalidCount: 0,//无效会员


        //会员分布数据；
        memberCurrentMonth: 0,//当月注册会员数
        memberCurrentSeason: 0,//当季度注册会员数
        memberCurrentYear: 0,//当年注册会员数

        //会员分布数据-环比
        rateCompareMonthLastYear: 0,//当月注册会员数
        rateCompareSeasonLastYear: 0,//当季度注册会员数
        rateCompareYearLastYear: 0,//当年注册会员数

        //近60天趋势：
        xAxisData: [],//X轴数据；
        yAxisData: [],//Y轴数据；

      };
    },


    created(){
//      this.getStsDate();
    },

    /**
     * 页面加载完毕后调用
     * */
    mounted() {
      this.listLatest60DaysTrend();//近60天会员注册趋势
      this.listAllChannel();//获取所有的渠道信息
      this.listAllPlatform();//获取所有的平台信息
      this.getCountOfMemberFun();//获取总会员记录数
      this.getDistributionOfMemberConsume();//获取会员分布柱状图
      this.getDataOfMemberRegister();//获取注册时间分布
    },
    methods: {


      /**
       * 获取统计日期
       */
      getStsDate(){
        let this_ = this;
        let nowDate = new Date();
        let year = nowDate.getFullYear();
        let month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
          : nowDate.getMonth() + 1;
        let day = (nowDate.getDate() - 1) < 10 ? "0" + (nowDate.getDate()-1) : (nowDate.getDate() - 1);
        this_.stsDate = year + "-" + month + "-" + day;
      },
      /**
       * 查询所有渠道接口，用作下拉框
       */
      listAllChannel(){
        let this_ = this;
        let param = {
          channelId: this_.channelId,
          storeId: this_.storeId,
          storeName: this_.storeName,
          platformId: this_.platformId,
          status: 1,
          deleteFlag: 0,
          deptId: null,
          merchantId: null,
          id: null,
          stsDate: this_.stsDate,
          createTimeStart: null,
        };
        this.utils.request.listAllChannel(param, res => {
          if (res !== null && res.code === '0000' && res.data !== null && res.data.length > 0) {
            this.channelOptions = res.data;
          } else {
            this.$message({message: '没有获取到渠道信息', type: 'error'})
          }
        });
      },
      /**
       * 查询所有渠道接口，用作下拉框
       */
      listAllPlatform(){
        let this_ = this;
        let param = {
          channelId: this_.channelId,
          storeId: this_.storeId,
          storeName: this_.storeName,
          platformId: this_.platformId,
          status: 1,
          deleteFlag: 0,
          deptId: null,
          merchantId: null,
          id: null,
          stsDate: this_.stsDate,
          createTime: null,
        };
        this.utils.request.listAllPlatform(param, res => {
          if (res !== null && res.code === '0000' && res.data !== null && res.data.length > 0) {
            this.platformOptions = res.data;
          } else {
            this.$message({message: '没有获取到平台信息', type: 'error'})
          }
        });
      },
      /**
       * 获取所有会员记录数目
       */
      getCountOfMemberFun(){
        let this_ = this;
        let param = {
          channelId: this_.channelId,
          storeId: this_.storeId,
          storeName: this_.storeName,
          platformId: this_.platformId,
          status: 1,
          deleteFlag: 0,
          deptId: null,
          merchantId: null,
          id: null,
          stsDate: this_.stsDate,
          createTime: null,
        };
        this.utils.request.getCountOfMemberNum(param, res => {
          if (res !== null && res.code === '0000' && res.data !== null && res.data.memberNumber !== null) {
            this.memberCount = res.data.memberNumber;
          } else {
            this.$message({message: '没有获取到会员总人数', type: 'error'})
          }
        });
      },

      /**
       * 获取[会员注册状态]分布-柱状图
       */
      getDistributionOfMemberConsume(){
        let this_ = this;
        let param = {
          channelId: this_.channelId,
          storeId: this_.storeId,
          storeName: this_.storeName,
          platformId: this_.platformId,
          deleteFlag: 0,
          stsDate: this_.stsDate,
        };
        this_.utils.request.getDistributionOfMemberConsume(param, res => {
          if (res !== null && res.code === '0000' && res.data !== null) {
            this_.distributionTotal = (res.data.validMemberNumber + res.data.invalidMemberNumber) / 10000;
            this_.distributionRegisteredAndConsumedTotal = (res.data.consumeMemberNumber) / 10000;
            this_.distributionRegisteredNotConsumedTotal = (res.data.unconsumeMemberNumber) / 10000;
            this_.validCount = res.data.validMemberNumber;
            this_.invalidCount = res.data.invalidMemberNumber;
            this_.memberRegister();
            this_.effective();
          } else {
            this_.$message({message: '没有获取到总记录数', type: 'error'})
          }
        });
      },

      /**
       * 当年记录数
       */
      getDataOfMemberRegister(){
        let this_ = this;
        let createTime = new Date();
        createTime.setDate(1);
        let param = {
          channelId: this_.channelId,
          storeId: this_.storeId,
          storeName: this_.storeName,
          platformId: this_.platformId,
          status: 1,
          deleteFlag: 0,
          deptId: null,
          merchantId: null,
          id: null,
          stsDate: this_.stsDate,
          createTimeStart: createTime,
        };
        this_.utils.request.getDataOfMemberRegister(param, res => {
          if (res !== null && res.code === '0000' && res.data !== null) {
            //当月注册会员数
            this_.memberCurrentMonth = res.data.memberCurrentMonth;
            this_.rateCompareMonthLastYear = (res.data.rateCompareMonthLastYear*100);

            //当季注册会员数
            this_.memberCurrentSeason = res.data.memberCurrentSeason;
            this_.rateCompareSeasonLastYear = (res.data.rateCompareSeasonLastYear*100);

            //当年注册会员数
            this_.memberCurrentYear = res.data.memberCurrentYear;
            this_.rateCompareYearLastYear = (res.data.rateCompareYearLastYear*100);
          } else {
            this_.$message({message: '没有获取到当前季度的信息', type: 'error'})
          }
        });
      },

      /**
       * 近60天趋势
       */
      listLatest60DaysTrend(){
        let this_ = this;
        let createTime = new Date();
        let param = {
          channelId: this_.channelId,
          storeId: this_.storeId,
          storeName: this_.storeName,
          platformId: this_.platformId,
          status: 1,
          deleteFlag: 0,
          deptId: null,
          merchantId: null,
          id: null,
          stsDate: this_.stsDate,
          createTimeStart: createTime,
        };
        this_.utils.request.listLatest60DaysTrend(param, res => {
          if (res !== null && res.code === '0000' && res.data !== null) {
            let list = res.data;
            list.forEach(item =>{
              this_.xAxisData.push(item.registerDate.substring(0,9));
              this_.yAxisData.push((item.memberNumber/1000));
            });
            this_.sixtyDay();
          } else {
            this_.$message({message: '无法获取[近60天趋势]', type: 'error'})
          }
        });
      },

      // 会员注册状态分布
      memberRegister() {
        let memberRegister = document.getElementById("memberRegister");
        let memberRegisterWrap = this.$echarts.init(memberRegister);
        let option = {
          title: {
            text: "会员注册状态分布"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          legend: {
            data: ["会员数"],
            left: "center"
          },
          xAxis: [
            {
              type: "value",
              name: "",
              min: 0,
              max: 150,
              position: "bottom",
              axisLabel: {
                formatter: "{value} 万"
              }
            }
          ],
          yAxis: {
            name: "",
            type: "category",
            data: ["注册且有购买", "注册但无购买", "合计"]
          },
          series: [
            {
              name: "会员数",
              type: "bar",
              barHeight: 150,
              barWidth: 30,
              data: [this.distributionTotal, this.distributionRegisteredAndConsumedTotal, this.distributionRegisteredNotConsumedTotal],
              color: "#1ea084"
            }
          ]
        };
        memberRegisterWrap.setOption(option);
      },

      //  有效/无效会员占比
      effective() {
        let effective = document.getElementById("effective");
        let effectiveWrap = this.$echarts.init(effective);
        let option = {
          title: {
            text: "有效/无效会员占比"
          },
          color: ["#1ea084", "#b0d1b5"],
          legend: {
            orient: "horizontal",
            left: "center",
            data: ["无效会员", "有效会员"]
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: ["50%", "65%"],
              data: [
                {value: this.validCount, name: "有效会员"},
                {value: this.invalidCount, name: "无效会员"}
              ]
            }
          ]
        };
        effectiveWrap.setOption(option);
      },
      // 近60天_注册趋势
      sixtyDay() {
        let sixtyDay = document.getElementById("sixtyDay");
        let mySixtyDayWrap = this.$echarts.init(sixtyDay);
        let option = {
          title: {
            text: "近60天_注册趋势"
          },
          xAxis: {
            type: "category",
            data: this.xAxisData,
            axisLabel: {
              interval: 0,
              rotate: 45 //代表逆时针旋转45度
            }
          },
          yAxis: [
            {
              type: "value",
              name: "",
              min: 0,
              max: 20,
              position: "left",
              axisLabel: {
                formatter: "{value} 千"
              }
            }
          ],
          legend: {
            data: ["会员数"]
          },
          series: [
            {
              name: "会员数",
              data: this.yAxisData,
              type: "line",
              smooth: true,
              color: "#1ea084"
            }
          ]
        };
        mySixtyDayWrap.setOption(option);
      }
    }
  };
</script>

<style scoped lang="scss">
 @import "../../../../assets/css/dataCenterEcharts.css";

  .ec-container {
    .info {
      .grid-content {
        height: 146px;
      }
    }
    .memberNum {
      .grid-content {
        height: 140px;
        .counts {
          font-size: 28px;
          color: #333;
          font-weight: 700;
          margin: 20px 0;
        }
        .line {
          margin: 10px 0;
          display: flex;
          justify-content: space-between;
          i {
            width: 49%;
            height: 4px;
            display: block;
            background: #a5d9ce;
            &.on {
              background: #1ea084;
            }
          }
        }
      }
    }
    .form /deep/ .el-col .grid-content .el-select {
      width: 150px;
    }
    // .form .come {
    //   p {
    //     margin: 6px 0;
    //   }
    // }
  }
</style>
